<script setup>
defineProps({
  number: {type: String, required: true},
  title: {type: String, required: true},
  english: {type: String, required: true},
  subTitle: {type: String, required: true},
})
</script>

<template>
  <view class="column">
    <view class="number font150 inter">{{ number }}</view>
    <view class="column main">
      <view class="title font56">{{ title }}</view>
      <view class="english font28">{{ english }}</view>
      <view class="row line">
        <view class="progress"/>
      </view>
      <view class="sub-title font24 top8">{{ subTitle }}</view>
    </view>
  </view>
</template>

<style scoped>
.number {
  color: #ffffff29;
  margin-right: 10%;
}

.main {
  margin-left: 8%;

  .title {
    margin-top: -15%;
  }

  .english {
    color: #ffffff80;
  }

  .line {
    width: 30%;
    height: 2px;
    background-color: white;
    margin-top: 8%;

    .progress {
      width: 40%;
      height: 4px;
      background-color: #04c0df;
    }
  }
}
</style>